<template>
  <div class="resultMsgBox" :class="cName">
	  <slot></slot>
  </div>
</template>
<script>

	import cx from 'classnames'
	export default{
		name: 'msg',
		props: {
			className: String,
			cName: String
		},
	  data () {
	    return{
	      msg:'hello vue'
	    }
	  },

		computed: {
			classed () {
				return cx({
					[this.className]: !!this.className
				})
			}
		},
		components: {
		}
	}
</script>

<style>
	.resultMsgBox {
		background: rgba(0,0,0,0.6);
		position: fixed;
		z-index: 2;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 40px;
		line-height: 40px;
		border-top: 1px solid #afafaf;
		-webkit-box-shadow: 0 -2px 1px -1px rgba(0, 0, 0, 0.05);
		-moz-box-shadow: 0 -2px 1px -1px rgba(0, 0, 0, 0.05);
		box-shadow: 0 -2px 1px -1px rgba(0, 0, 0, 0.05);
		padding-left: 250px;
		color: #fff;
		text-align: center;
	}


	@-webkit-keyframes fadeInUp {
		from {
			opacity: 0;
			-webkit-transform: translate3d(0, 100%, 0);
			transform: translate3d(0, 100%, 0);
		}

		to {
			opacity: 1;
			-webkit-transform: none;
			transform: none;
		}
	}

	@keyframes fadeInUp {
		from {
			opacity: 0;
			-webkit-transform: translate3d(0, 100%, 0);
			transform: translate3d(0, 100%, 0);
		}

		to {
			opacity: 1;
			-webkit-transform: none;
			transform: none;
		}
	}

	.fadeInUp {
		-webkit-animation-duration: 1s;
		animation-duration: 1s;
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both;
		-webkit-animation-name: fadeInUp;
		animation-name: fadeInUp;
	}

	@-webkit-keyframes fadeOutDown {
		from {
			opacity: 1;
		}

		to {
			opacity: 0;
			-webkit-transform: translate3d(0, 100%, 0);
			transform: translate3d(0, 100%, 0);
		}
	}

	@keyframes fadeOutDown {
		from {
			opacity: 1;
		}

		to {
			opacity: 0;
			-webkit-transform: translate3d(0, 100%, 0);
			transform: translate3d(0, 100%, 0);
		}
	}

	.fadeOutDown {
		-webkit-animation-duration: 1s;
		animation-duration: 1s;
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both;
		-webkit-animation-name: fadeOutDown;
		animation-name: fadeOutDown;
	}

</style>